<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title>菜单管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" type="text/css" th:href="@{/assets/css/layui.css}"/>
		<link rel="stylesheet" type="text/css" th:href="@{/assets/css/view.css}"/>
		<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
	</head>

	<body class="layui-view-body">
	<div class="layui-content">
		<div class="layui-row">
			<div class="layui-card">
				<div class="layui-card-body">
					<div class="form-box">
						<div class="" style="margin-top: 20px;margin-left:20px;">
							<button class="layui-btn" id="expand">全部展开</button>
							<button class="layui-btn" id="collapse">全部收起</button>
							<!--<button class="layui-btn" id="deleteAll">删除</button>-->
							<a class="layui-btn " title="刷新当前页" href="javascript:void(0);" onclick="layer.load(1);window.location.reload(true);"><i class="layui-icon"></i>刷新</a>
							<div id="menu"></div>
						</div>
					</div>
					<!--菜单列表开始-->
					<div class="show-add-data" style="display: none;padding: 10px">
						<form id="menu-form" action="" class="layui-form">
							<input type="hidden" th:name="id">
							<input type="hidden" th:name="pid">
							<div class="layui-form-item">
								<label class="layui-form-label" style="text-align: left">
									父菜单
								</label>
								<div class="layui-input-block">
									<input type="text" name="parent-name" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label " style="text-align: left">
									菜单名称
								</label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" name="name">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label " style="text-align: left">
									链接
								</label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" name="url">
								</div>
							</div>
							<div class="layui-form-item float-right">
								<div class="layui-input-block">
									<a class="layui-btn layui-btn-normal layui-btn-sm add-btn" lay-submit lay-filter="add">添加</a>
									<a class="layui-btn layui-btn-primary close-btn layui-btn-sm">关闭</a>
								</div>
							</div>

						</form>
					</div>
					<!--菜单列表结束-->
				</div>
			</div>
		</div>
	</div>
	</body>
	<script type="text/javascript" th:src="@{/assets/layui.js}"></script>
	<script th:inline="javascript">
        /*<![CDATA[*/
        var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
        /*]]>*/
	</script>
	<script type="text/javascript">
		var menuData;
		$(function () {
			$.ajax({
                type : "get",
                url : contextPath + "/a/menu/queryMenuTree",
                data : "",
                // dataType : "json",
                async : true,
                success : function(jsonData) {
                    menuData = jsonData;
				}
			})
        })

		var layout = [{name: 'id',field: 'id',headerClass: 'value_col',colClass: 'value_col'},
			{name: '菜单名称',field:'name', treeNodes: true,headerClass: 'value_col',colClass: 'value_col'},
			{name: '操作',headerClass: 'value_col',colClass: 'value_col',style: 'width: 30%',
				render: function(row) {
					return [
						'<a class="layui-btn layui-btn-xs layui-btn" lay-event="del"   onclick="add(' + row.id+ ')" title="新增"> <i class="layui-icon ">&#xe654;</i> </a>',
						'<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="del"   onclick="edit(' + row.id + ')" title="编辑"> <i class="layui-icon ">&#xe642;</i> </a>',
						'<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"   onclick="del(' + row.id + ')" title="删除"> <i class="layui-icon ">&#xe640;</i> </a>',
					].join('');
				}
			}
		];

		layui.use(['form', 'tree', 'layer'], function() {
		    console.log(menuData);
			var layer = layui.layer,
				form = layui.form,
				$ = layui.jquery;
			var menuTree = layui.treeGird({
				elem: '#menu', //传入元素选择器
				spreadable: false, //设置是否全展开，默认不展开
				checkbox: true,
				nodes: menuData,
				layout: layout
			});

			form.render();

			$('#collapse').on('click', function() {
				layui.collapse(menuTree);
			});

			$('#expand').on('click', function() {
				layui.expand(menuTree);
			});

		});

        //添加事件
        function add(obj){
            //获取对象
            getParentMenu(obj);
            loadMenuForm();
        }
        //编辑菜单
        function edit(obj) {
            //获取对象
            getParentMenu(obj);
            getMenu(obj);
            loadMenuForm();
        }

        //删除
        function del(menuId) {
            //询问框
            layer.confirm('确认删除？', {
                btn: ['必须的','算了吧'] //按钮
            }, function(){
                $.ajax({
                    type : "get",
                    url : contextPath + "/a/menu/delete",
                    data : {'menuId' : menuId},
                    success : function(jsonData) {
                        layer.msg('删除成功', {icon: 1},function () {
                            //重新加载页面
                            layer.load(1);
                            window.location.reload(true);
                        });
                    }
                })

            }, function(){
                layer.msg('取消成功', {
                    time: 1000, //20s后自动关闭
                });
            });

        }

        //获取菜单
        function getParentMenu(menuId) {
            $.ajax({
                type : "get",
                url : contextPath + "/a/menu/getParentMenu",
                data : {'menuId' : menuId},
                success : function(jsonData) {
                    $(".show-add-data").find("input[name='parent-name']").val(jsonData.name);
                    if(jsonData.pid == 0) {
                    	$(".show-add-data").find("input[name='pid']").val(jsonData.id);
					} else {
                        $(".show-add-data").find("input[name='pid']").val(jsonData.pid);
					}
                }
            })
        }

        //获取菜单
        function getMenu(menuId) {
            $.ajax({
                type : "get",
                url : contextPath + "/a/menu/getMenuById",
                data : {'menuId' : menuId},
                success : function(jsonData) {
                        $(".show-add-data").find("input[name='id']").val(jsonData.id);
                        $(".show-add-data").find("input[name='name']").val(jsonData.name);
                        $(".show-add-data").find("input[name='url']").val(jsonData.url);
                }
            })
        }

        //加载表单
		function loadMenuForm() {
            layer.open({
                type:1,
                title:'编辑',
                area: ['390px', '330px'],   //宽高
                content:$(".show-add-data"),
                success:function(layero, index){
                    //关闭窗口
                    $(layero).find(".close-btn").on("click", function () {
                        layer.close(index);
                    });
                    //ajax请求
                    $(layero).find(".add-btn").on("click", function () {
                        layer.close(index);
                        var data = $("#menu-form").serialize();
                        $.ajax({
                            type : "get",
                            url : contextPath + "/a/menu/save",
                            data : data,
                            success : function(jsonData) {
                                layer.msg('保存成功', {icon: 1},function () {
                                    //重新加载页面
                                    layer.load(1);
                                    window.location.reload(true);
                                });
                            }
                        })
                    });

                }
            });
        }
	</script>

</html>